<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      form {
        width: 400px;
        border: 10px solid pink;
        padding: 20px;
      }

      label {
        display: block;
        height: 80px;
        position: relative;
      }

      input {
        height: 30px;
        font-size: 24px;
        padding-left: 20px;
      }

      label > span {
        position: absolute;
        left: 0;
        top: 35px;
        font-size: 20px;
        color: red;
        display: none;
      }
    </style>
  </head>
  <body>
    <form>
      <label>
        用户名: <input class="username" type="text" />
        <!-- 数字字母开头6～12位 忽略大小写 -->
        <span>请按照规则填写用户名</span>
      </label>
      <label>
        密码: <input class="password" type="text" />
        <!-- 数字字母下划线 6～12位 -->
        <span>请按照规则填写密码</span>
      </label>
      <label>
        手机号: <input class="phone" type="text" />
        <!-- 11位数字即可 -->
        <span>请按照规则填写手机号</span>
      </label>
      <label>
        邮箱: <input class="email" type="text" />
        <!-- 6～12位 开头为数字大小写字母 中间为数字字母下划线均可-->
        <!-- @ 只接收qq 163 sina -->
        <!-- com或者cn -->
        <span>请按照规则填写邮箱</span>
      </label>
      <input type="button" value="完善资料" />
    </form>
    <script>
      //方案二：统一验证
      //1.给每个input起一个单独的类名（或者id 标识 只是用于区分）
      //2.准备正则，以对象的形式准备正则，对象的键名就用文本框的独立标识，值 就用 正则
      //当我们的文本框className=="username"，就用对象(o) o内一个叫做username的正则去验证
      let regObj = {
        username: /^[0-9a-z]\w{5,11}$/i,
        password: /^\w{6,12}$/,
        phone: /^\d{11}$/,
        email: /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/,
      };
      //3.获取所有文本框
      let inps = document.querySelectorAll("form input");
      //3.2 给每个input框绑定 表单输入事件
      inps.forEach(function (item) {
        item.oninput = function () {
          //4.1 拿到正在输入的那个input框的内容
          let text = item.value;
          //4.2 校验对应的正则
          let reg = regObj[item.className];
          //4.3 拿到对应的span标签
          let span = item.nextElementSibling;
          //4.4 操作显示和隐藏
          span.style.display = reg.test(text) ? "none" : "block";
          // if (reg.test(text)) {
          //   span.style.display = "none";
          // } else {
          //   span.style.display = "block";
          // }
        };
      });

      // //方案一：逐个实现 要写四个，很麻烦 不想用
      // //1.获取元素
      // let nameInp = document.querySelector(".username");
      // let reg = /^[0-9a-z]\w{5,11}$/i;
      // //2.绑定事件
      // nameInp.oninput = function () {
      //   //3.拿到文本内容
      //   let username = nameInp.value;
      //   //4.正则验证
      //   if (reg.test(username)) {
      //     nameInp.nextElementSibling.style.display = "none";
      //   } else {
      //     nameInp.nextElementSibling.style.display = "block";
      //   }
      // };
    </script>
  </body>
</html>
